import {Col, Form, Input, message, Modal, Row, Spin,Select,Tag,} from "antd";
import React from "react";
import axios from "../../../../components/service/request";


const EditModal  = ({ isModalVisible, cancelModal,reload, baseUir,value }) => {

  //确认框的加载状态、旋转加载的状态、模块选项的值和模块选项的更新函数 定义初始状态
    const [confirmLoading, setConfirmLoading] = React.useState(false);
    const [spinLoading, setSpinLoading] = React.useState(false);
    const [title, setTitle] = React.useState("借用申请批准");
    const [form] = Form.useForm();


    React.useEffect(() => {
        if (value) {
            setTitle("借用申请批准")
            form.setFieldsValue({
              id: value.id, 
              equId:value.equId
            });
        }
        setSpinLoading(false)
    }, [form, isModalVisible, value]);


    //管理员批准时 提交按钮方法
    const handleOk = () => {
        setConfirmLoading(true)
        form.validateFields()
            .then((values) => {
                form.resetFields();
                axios.post(baseUir+"/approve", values).then(res => {
                    if (res.code === 200) {
                        message.info(res.msg)
                        cancelModal()
                        reload()
                    }  else {
                        message.info(res.msg)
                    }
                })
            })
        setConfirmLoading(false)

    }
    //提交申请时取消按钮方法
    const handleCancel = () => {
        form.resetFields()
        cancelModal()
    }

    return (
        <Modal title={title}
               visible={isModalVisible}
               onOk={handleOk}
               onCancel={handleCancel}
               okText={'确定'}
               confirmLoading={confirmLoading}
               cancelText={'取消'}
               width={800}>
            <Spin spinning={spinLoading}>
                <Form form={form}
                      labelAlign={'right'}
                      layout={'vertical'}
                >
                    <Form.Item name="id" hidden={true}>
                        <Input/>
                    </Form.Item>
                    <Form.Item name="equId" hidden={true}>
                        <Input/>
                    </Form.Item>
                    <Row gutter={16}>
                        <Col span={12}>
                            <Form.Item name="approve" label="请选择是否借用"
                                rules={[
                                    {
                                        required: true,
                                        message: "必须选择是否借用！"
                                    }
                                ]}>
                                {
                                <Select
                                placeholder="请选择是否借用"
                                style={{width: '100%'}}
                                allowClear
                            >
                                <option value="1" ><Tag color='success'>批准借用</Tag></option>
                                <option value="0" ><Tag color="error">拒绝借用</Tag></option>
                            </Select>
                                }
                            </Form.Item>
                        </Col>
                    </Row> 
                    <Row gutter={16}>
                        <Col span={12}>
                            <Form.Item name="answer" label="管理员答复">
                                <input  style={{width: '100%'}}/>
                            </Form.Item>
                        </Col>
                    </Row>  
                </Form>
            </Spin>

        </Modal>
    );

}

export default EditModal;